<template>
	<view class="menu-item" :class="{ selected: item.isSelected}">
		<!-- 主菜单项 -->
		<view class="menu-title" @click="toggle">
			{{ item.productName }}
			<!-- <span v-if="hasChildren" class="arrow" :class="{ 'open': item.isOpen }">▲</span> -->
		</view>
	</view>
</template>

<script setup lang="ts">
	import { computed, ref } from 'vue';

	interface Props {
		item : ProductListType;
	}
	import { ProductListType } from '../types/types'
	import { useCommonStore } from '../stores/useCommonStore';
	import { StyleImg } from "../types/types";
	import { getProductStyle } from "../api/productList.js"
	import { useI18n } from 'vue-i18n'
	const { t } = useI18n()
	
	// 动态参数
	const params = ref({
		lang: uni.getStorageSync('lang'),
		productId: ''
	});

	const props = defineProps<Props>();
	const emit = defineEmits(['cancleAll']);
	const commonStore = useCommonStore();
	const styleList = ref<StyleImg[]>([])
	const cancleAll = (nowItem : ProductListType) => {
		// 向父组件发送事件，清除其他项的选中状态
		emit('cancleAll', nowItem);
	}
	const toggle = () => {
		emit('cancleAll', props.item);
		// 设置当前项为选中状态
		props.item.isSelected = true;
		commonStore.select(props.item.productId);
		const selectedId = commonStore.nowSelectedId;
		if (selectedId) {
			params.value.productId = selectedId;
			getStyleList(params.value);
		} else {
			console.error('错误：nowSelectedId 为空');
		}
	};
	async function getStyleList(customParams : { lang : string; productId : string }) {
		const finalParams = {
			...customParams
		};
		// 0715 款式英文搜索
		if (uni.getStorageSync('lang') == "") {
			finalParams.lang = "cn"
		}else{
			finalParams.lang = uni.getStorageSync('lang')
		}
		try {
			const response = await getProductStyle(finalParams)
			if (response.code == 200 && response.msg == "success") {
				//0716 空的存空数组
				if(response.data==null || !response.data){
					styleList.value = []
					commonStore.setStyleList(styleList.value);
				}else{
					styleList.value = response.data; // 更新styleList为接口返回的数据
					commonStore.setStyleList(styleList.value);
				}
			} else {
				uni.showToast({
					title: response.msg,
					icon: 'none', // 确保能显示完整错误信息
					duration: 1000 // 适当延长显示时间
				});
				//0716 报错存空数组
				styleList.value = []
				commonStore.setStyleList(styleList.value);
			}
		} catch (error) {
			styleList.value = []
			commonStore.setStyleList(styleList.value);
			let errorMsg = t('loadFail');
			// 尝试从错误对象中获取更具体的信息
			if (error.message) {
				errorMsg += error.message;
			} else if (typeof error === 'string') {
				errorMsg += error;
			}
			uni.showToast({
				title: errorMsg,
				icon: 'none', // 确保能显示完整错误信息
				duration: 1000 // 适当延长显示时间
			});
		}
	}
</script>

<style scoped lang="less">
	.menu-item {
		&.selected {
			background-color: rgb(231, 172, 179);
		}

		height: auto;
		/* 动态高度 */
		line-height: 1.5rem;
		padding: 0.3rem;
		margin-bottom: 0.1rem;
		text-align: left;
		// white-space: nowrap;
		font-size: 0.9rem;

		.menu-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			cursor: pointer;

			.arrow {
				transition: transform 0.3s ease;
			}

			.open {
				transform: rotate(180deg);
			}
		}

		.submenu {
			margin-top: 0.5rem;
			padding-left: 0.1rem;
			// background-color: lightpink;
		}
	}
</style>